<script setup>
  import { onMounted, onUnmounted } from 'vue';

  // 组合式API
  // setup 是将 beforeCreate created setup 合并了 所以它是应用在网络请求中

  // onMounted
  onMounted(() => {
    // 获得DOM元素
    document.querySelector('p').style.color = 'green'
  })

  const timer = setInterval(() => {
    console.log('hello vue');
  }, 1000)

  // onUnmounted
  onUnmounted(() => {
    // 关闭定时器
    clearInterval(timer)
  })
</script>

<script>
  // 采用 选项式API
  export default {
    // 响应式数据 这个方法
    data () {
      return {
        count: 0
      }
    },
    // 方法/函数 这是一个对象
    methods: {
      fn: () => {
        console.log('函数 fn 调用了');
      },
    },
    // 最早执行的函数
    setup () {
      console.log('00-setup');
    },

    // 创建阶段 《第一阶段》
    // 此时已经有API 但是内部的数据还没有初始化 也就是一个空壳
    // 既不能访问数据 也不能调用函数
    beforeCreate () {
      console.log('01-beforeCreate');
      // console.log(this.data); // undefined
      // console.log(this.fn); // undefined

    },
    // 既能访问数据 也能调用函数
    created () {
      console.log('02-created');
      // console.log(this.count); // 0
      // console.log(this.fn); // 有数据
      // this.fn()

      // 设置定时器 由于 this 是共享的 所以可以通过this 来共享数据
      this.timerId = setInterval(() => {
        console.log(this.count);
      }, 1000)
    },

    // 挂载阶段 《第二阶段》
    // 挂载前 因为没有将元素挂载进真正的DOM树上 所以不能获取 DOM 元素
    beforeMount () {
      console.log('03-beforeMount');
      // console.log(document.querySelector('p')); // null
    },
    // 挂载后 因为已经将元素挂载进真正的DOM树上 所以能获取 DOM 元素
    mounted () {
      console.log('04-mounted');
      let p = document.querySelector('p');
      // console.log(p);
      // p.style.color = 'red'
    },

    // 更新阶段 《第三阶段》 指的是DOM更新前后 不是数据 数据都是最新的
    // 更新前
    beforeUpdate () {
      console.log('05-beforeUpdate');
      console.log(this.count); // 一样的
      console.log(document.querySelector('p').innerText); // 旧的
    },
    // 更新后
    updated () {
      console.log('06-updated');
      console.log(this.count); // 一样的
      console.log(document.querySelector('p').innerText); // 新的
    },

    // 卸载阶段 《第四阶段》 可以清理空间等一系列优化工作 例如清理定时器
    // 卸载前 
    beforeUnmount () {
      console.log('07-beforeUnmount');
    },
    // 卸载后
    unmounted () {
      console.log('08-unmounted');

      // 清除定时器
      clearInterval(this.timerId)
    },
  }
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">+1</button>
  </div>
</template>


<style scoped></style>